import {Card, Table} from 'antd';
import React, {useEffect, useState} from 'react';

import {ResultData} from "@/services/A10/ResultController";
import {ProColumns} from "@ant-design/pro-components";
import * as echarts from "echarts";



const addChart: React.FC = () => {
  const [Result,setResultData] = useState<any>();
  const [,setState] = useState<boolean>();
  const [option , setoption] = useState<any>({});
  const initSearchParams = {
    name:"result.json"
  };
  const chartdata = {
    data:{}
  }
  let chartOption = null;
  const handleResultData = async () => {
    const resp = await ResultData(initSearchParams);
    setState(true);
    if (resp){
      const respdata = resp.data.data;
      chartOption = JSON.parse(resp.data.optionJson);
      chartdata.data = chartOption;
      option.data = chartOption;
      setoption(chartOption);
      console.log(option);
      const Resultdata_ = Object.entries(respdata).map(([id, value]) => ({ id, value }));
      // 输出统计结果
      setResultData(Resultdata_);
      setState(false);
      console.log(Result);
      //
      const pieChartDom = document.getElementById("pieChart");

      const chart = echarts.init(pieChartDom);
      chart.setOption(chartOption);
    }
      }


  useEffect( async () => {
    const searchParams = new URLSearchParams(window.location.search);
    const name = searchParams.get('name');
    // const query = queryString.parse(window.location.search);
    // const name = query;
    initSearchParams.name = name;
    handleResultData();

  },[]);

  const resultcolumns: ProColumns<any>[] = [
    {
      title: '样本ID',
      dataIndex: 'id',
      width: 150,
    },
    {
      title: '分类',
      dataIndex: 'value',
      width: 150,
    }
  ];


  return (
      <div>
    <card title="分类结果">
      <Card title="可视化图表" style={{marginBottom:"20px"}}>
        <div id="pieChart" style={{ height: "250px", marginTop: "10px" }}></div>
      </Card>
      <Table
        columns={resultcolumns}
        dataSource={Result}
        scroll={{
          y: 240,
        }}
      />
    </card>
      </div>
  );
};

export default addChart;
